import React from "react";
import {
  Form,
  Input,
  InputNumber,
  Select,
  Card,
  Row,
  Col,
  Space,
  Typography,
  Divider,
} from "antd";
import type { FormInstance } from "antd/es/form";

const { Option } = Select;
const { Text } = Typography;

interface TemplateFormProps {
  form: FormInstance;
}

const TemplateForm: React.FC<TemplateFormProps> = ({ form }) => {
  const questionTypes = [
    { key: "choice", label: "选择题" },
    { key: "programming", label: "编程题" },
    { key: "analysis", label: "分析题" },
  ];

  const difficultyLevels = [
    { key: "easy", label: "简单" },
    { key: "medium", label: "中等" },
    { key: "hard", label: "困难" },
  ];

  return (
    <Form
      form={form}
      layout="vertical"
      initialValues={{
        totalScore: 100,
        duration: 120,
        questionDistribution: {
          choice: { count: 20, score: 2, difficulty: ["easy", "medium"] },
          programming: { count: 2, score: 20, difficulty: ["medium", "hard"] },
          analysis: { count: 2, score: 10, difficulty: ["medium"] },
        },
      }}
    >
      <Row gutter={16}>
        <Col span={12}>
          <Form.Item
            name="name"
            label="模板名称"
            rules={[{ required: true, message: "请输入模板名称" }]}
          >
            <Input placeholder="请输入模板名称" />
          </Form.Item>
        </Col>
        <Col span={6}>
          <Form.Item
            name="totalScore"
            label="总分"
            rules={[{ required: true, message: "请输入总分" }]}
          >
            <InputNumber min={1} max={150} style={{ width: "100%" }} />
          </Form.Item>
        </Col>
        <Col span={6}>
          <Form.Item
            name="duration"
            label="考试时长(分钟)"
            rules={[{ required: true, message: "请输入考试时长" }]}
          >
            <InputNumber min={30} max={180} style={{ width: "100%" }} />
          </Form.Item>
        </Col>
      </Row>

      <Divider>题型分布</Divider>

      {questionTypes.map((type) => (
        <Card key={type.key} size="small" style={{ marginBottom: 16 }}>
          <Space direction="vertical" style={{ width: "100%" }}>
            <Text strong>{type.label}</Text>
            <Row gutter={16}>
              <Col span={8}>
                <Form.Item
                  name={["questionDistribution", type.key, "count"]}
                  label="题目数量"
                  rules={[{ required: true, message: "请输入题目数量" }]}
                >
                  <InputNumber min={0} max={50} style={{ width: "100%" }} />
                </Form.Item>
              </Col>
              <Col span={8}>
                <Form.Item
                  name={["questionDistribution", type.key, "score"]}
                  label="每题分值"
                  rules={[{ required: true, message: "请输入每题分值" }]}
                >
                  <InputNumber min={0} max={100} style={{ width: "100%" }} />
                </Form.Item>
              </Col>
              <Col span={8}>
                <Form.Item
                  name={["questionDistribution", type.key, "difficulty"]}
                  label="难度要求"
                  rules={[{ required: true, message: "请选择难度要求" }]}
                >
                  <Select
                    mode="multiple"
                    placeholder="请选择难度要求"
                    style={{ width: "100%" }}
                  >
                    {difficultyLevels.map((level) => (
                      <Option key={level.key} value={level.key}>
                        {level.label}
                      </Option>
                    ))}
                  </Select>
                </Form.Item>
              </Col>
            </Row>
          </Space>
        </Card>
      ))}
    </Form>
  );
};

export default TemplateForm;
